<template>
	<view>
		<!-- <map id="map"
			:style="{width: width, height: height}" 
			show-location
			:include-points="includePoints_" 
			:latitude="latitude" 
			:longitude="longitude" 
			:markers="markers"
			:polyline="polyline" 
			:scale="10"
			:controls="controls"
			@controltap="goto_Positon">
		</map> -->
		<map id="map"
			:style="{width: width, height: height,position:'relative'}" 
			show-location
			:latitude="latitude" 
			:longitude="longitude" 
			:markers="markers"
			:polyline="polyline" 
			:controls="controls"
			@controltap="goto_Positon">
			<!-- <image @click="goto_Positon" src="../../../../static/map/myposition.png" style="position: absolute;bottom: 40px;right: 10px;width: 54px;height: 54px;"></image> -->
		</map>
		
	</view>
</template>

<script>
	import Config from '../../lib/config.js';
	const amapFile = require('../../lib/amap-uni.js');
	export default {
		data() {
			return {
				markers: [],
				polyline: [],
				defaultConfig: {
					showMarks: true,
					lineColor: "#0606ff", //路径颜色
					lineWidth: 4, //路径宽度
					startImage: "",
					wayImage: "",
					endImage: ""
				},
				includePoints_:[],
				latitude:'',
				longitude:'',
				controls: [{
				    id: 1,
				    position: {
				        left: 300,
				        top: 380,
				        width: 54,
				        height: 54
				    },
				    iconPath: '/static/map/myposition.png',
				    clickable: true
				}],
			}
		},
		props: {
			width: {
				type: String,
				default: "100vw"
			},
			height: {
				type: String,
				default: "60vh"
			},
			// longitude: {
			// 	type: Number
			// },
			// latitude: {
			// 	type: Number
			// },
			startPoi: {
				type: String
			},
			wayPoi: {
				type: String
			},
			endPoi: {
				type: String
			},
			Config: {
				type: Object,
				default: function() {
					return {}
				}
			},
			includePoints:{
				type: Array,
				default: function() {
					return []
				}
			}
		},
		watch: {
			includePoints:{
			    handler(newVal,oldVal){
					if(newVal)
					{
						this.includePoints_=newVal
					}
			    },
				deep:true,
				immediate:true
			},
		},
		created() {
			this.getLocation()
			
			let that = this;
			// this.Config
			Object.assign(this.defaultConfig,this.Config)
			
			// fix longitude and latitude
			if (this.latitude == null || this.longitude == null) {
				let startPoints = this.startPoi.split(",")
				this.longitude = parseFloat(startPoints[0])
				this.latitude = parseFloat(startPoints[1])
			}


			this.getDrivingRoute(this.startPoi, this.endPoi, this.wayPoi, (res) => {
				that.polyline.push(res)
			});

			if (this.Config.showMarks) {
				this.setMarkers(this.startPoi, this.endPoi, this.wayPoi, (res) => {
					this.markers.push.apply(that.markers, res)
					// this.$forceUpdate()
				})
			}
		},
		methods: {
			getDrivingRoute(start, end, _waypoints, result, fail) {
				let that = this;
				var myAmapFun = new amapFile.AMapWX({
					key: Config.GAODE_KEY
				});

				myAmapFun.getDrivingRoute({
					origin: start,
					destination: end,
					waypoints: _waypoints,
					success: function(data) {
						console.log(data)
						var points = [];
						if (data.paths && data.paths[0] && data.paths[0].steps) {
							var steps = data.paths[0].steps;
							for (var i = 0; i < steps.length; i++) {
								var poLen = steps[i].polyline.split(';');
								for (var j = 0; j < poLen.length; j++) {
									points.push({
										longitude: parseFloat(poLen[j].split(',')[0]),
										latitude: parseFloat(poLen[j].split(',')[1])
									})
								}
							}
							that.$emit('getDrivingRoute',data.paths)
						}
						//这个返回结果就是对应的路线坐标,其他属性页面自己配置,请参照uniapp地图组件一章节
						//https://uniapp.dcloud.io/component/map
						result({
							points: points,
							color: that.Config.lineColor,
							width: that.Config.lineWidth,
							arrowLine:true,
							borderColor:'#306a55'
						})
					},
					fail: function(info) {
						console.log(info)
						fail(info)
					}
				})
			},
			setMarkers(startpoi, endpoi, waypoints, success) {
				let markers = [];

				//起点
				let start = {
					iconPath: this.Config.startImage,
					id: 0,
					longitude: parseFloat(startpoi.split(",")[0]),
					latitude: parseFloat(startpoi.split(",")[1]),
					width: 25,
					height: 25
				}
				markers.push(start)
				//终点
				let end = {
					iconPath: this.Config.endImage,
					id: 1,
					longitude: parseFloat(endpoi.split(",")[0]),
					latitude: parseFloat(endpoi.split(",")[1]),
					width: 25,
					height: 25
				}
				markers.push(end)
				//途经点,先将其分隔成为数组
				let _waypoints = waypoints.split(';')
				for (let i = 0, _len = _waypoints.length; i < _len; i++) {
					let point = {
						iconPath: this.Config.wayImage,
						id: i + 2,
						longitude: parseFloat(_waypoints[i].split(",")[0]),
						latitude: parseFloat(_waypoints[i].split(",")[1]),
						width: 25,
						height: 25
					}
					markers.push(point)
				}

				//统一风格为回调方式,也可以直接返回这个markers
				success(markers);

			},
			getLocation(){
				let that=this
				uni.getLocation({
					type: 'gcj02',
					success: (res) => {
						that.latitude=res.latitude
						that.longitude=res.longitude
						that.markers.push({
							iconPath: "/static/map/my_position.png",
							longitude: that.longitude,
							latitude: that.latitude,
							width: 20,
							height: 20,
						})
					},
					fail: (res) => {
						uni.showToast({
							icon:'error',
							title:'请打开定位'
						})
					}
				});
			},
			//跳转定位
			goto_Positon(){
				this.getLocation()
				let map = uni.createMapContext('map', this)
				 map.moveToLocation({
					 longitude:this.longitude,
					 latitude:this.latitude,
					 success: () => {},
				 })
			}
		}
	}
</script>

<style>

</style>